import React, { Component } from 'react'
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import Actions from '../../store/actions'
export class Footer extends Component {
  checkAll = () => {
    return (e) => {
      this.props.actions.CheckeAll(e.target.checked)
    }
  }
  clearDone = ()=>{
    this.props.actions.ClearDone()
    
  }
  render() {
    console.log(this.props.actions.hhh());
    const { todos } = this.props
    const doneCount = todos.reduce((pre, todo) => {
      return pre + (todo.done ? 1 : 0)
    }, 0)
    return (
      <div>
        全选<input type="checkbox" checked={doneCount === todos.length ? true : false} onChange={this.checkAll()} />
        <span>已完成{doneCount}</span>/全部{todos.length}
        <button onClick={this.clearDone}>清除已完成</button>
      </div>
    )
  }
}
// bind to App.props using map
const mapStateToProps = (state) => {
  return {
    ...state
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators(Actions, dispatch)
    // AddTodos: () => { dispatch(AddTodos) }
  }
};
export default connect(mapStateToProps, mapDispatchToProps)(Footer);
